<template>
  <div>
   <canvas id="canvas" width="100" height="40" @click="reclick()" ref= 'canvas' style="border: 1px solid #ccc; border-radius: 5px;"></canvas>
  </div>
</template>

<script>
export default {
  name: 'JudgeCode',
  data () {
    return {
      ShowNum: []
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    reclick () {
      this.draw()
    },
    draw () {
      const CanvasWidth = this.$refs.canvas.clientWidth
      const CanvasHeigth = this.$refs.canvas.clientHeight
      const canvas = this.$refs.canvas// 获取到canvas的对象，演员
      const context = canvas.getContext('2d')// 获取到canvas画图的环境，演员表演的舞台
      canvas.width = CanvasWidth
      canvas.height = CanvasHeigth
      var sCode = 'A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m'
      const aCode = sCode.split(',')
      const aLength = aCode.length// 获取到数组的长度
      for (let i = 0; i <= 3; i++) {
        const j = Math.floor(Math.random() * aLength)// 获取到随机的索引值
        const deg = Math.random() * 30 * Math.PI / 180// 产生0~30之间的随机弧度
        const txt = aCode[j]// 得到随机的一个内容
        this.ShowNum[i] = txt
        const x = 10 + i * 20// 文字在canvas上的x坐标
        const y = 20 + Math.random() * 8// 文字在canvas上的y坐标
        context.font = 'bold 23px 微软雅黑'

        context.translate(x, y)
        context.rotate(deg)

        context.fillStyle = this.randomColor()
        context.fillText(txt, 0, 0)

        context.rotate(-deg)
        context.translate(-x, -y)
      }
      for (let i = 0; i <= 5; i++) { // 验证码上显示线条
        context.strokeStyle = this.randomColor()
        context.beginPath()
        context.moveTo(Math.random() * CanvasWidth, Math.random() * CanvasHeigth)
        context.lineTo(Math.random() * CanvasWidth, Math.random() * CanvasHeigth)
        context.stroke()
      }
      for (let i = 0; i <= 30; i++) { // 验证码上显示小点
        context.strokeStyle = this.randomColor()
        context.beginPath()
        const x = Math.random() * CanvasWidth
        const y = Math.random() * CanvasHeigth
        context.moveTo(x, y)
        context.lineTo(x + 1, y + 1)
        context.stroke()
      }
      this.sendcode()
    },
    randomColor () { // 得到随机的颜色值
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    sendcode () {
      // console.log(this.ShowNum)
      this.$emit('getCode', this.ShowNum)
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
